<script lang="ts" setup>
import { ref } from 'vue'
import cqyj from './tabs/cqyj.vue'
import tgjl from '@/views/gdgl/ajgd/tabs/tgjl.vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 入参
const loading = ref<boolean>(false)

const activeName = ref((route.query.prePage as string) || 'cqyj')

const tabsList = ref<any[]>([
  {
    label: '超期预警',
    name: 'cqyj',
    closable: false,
  },
])

/*
 * 添加退改记录tab
 */
const tgjlTabRowData = ref<any>()
const addTgjlTab = (data: any) => {
  if (!tabsList.value.find((tab: any) => tab.name === 'tgjl')) {
    tabsList.value.push({
      label: '退改记录',
      name: 'tgjl',
      closable: true,
    })
  }
  tgjlTabRowData.value = { ...data, path: '/gdyj' }
  activeName.value = 'tgjl'
}

/*
 * 关闭退改记录tab
 */
const removeTab = (name: string) => {
  const i = tabsList.value.findIndex((tab) => tab.name === name)
  if (i > 0) activeName.value = tabsList.value[i - 1].name
  else activeName.value = 'tgjl'
  tabsList.value.splice(i, 1)
  // init()
  // tabsList.value = tabsList.value.filter((item) => {
}

if (activeName.value === 'tgjl') {
  const data = JSON.parse(route.query.cs as string)
  tabsList.value.push({
    label: '退改记录',
    name: 'tgjl',
    closable: true,
  })
  tgjlTabRowData.value = { ...data, path: '/gdyj' }
}
</script>
<template>
  <div class="container" v-loading="loading">
    <el-tabs type="card" v-model="activeName" @tab-remove="removeTab">
      <el-tab-pane
        v-for="item in tabsList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :closable="item.closable"
        lazy
      >
        <cqyj
          ref="jyglRef"
          v-show="activeName === 'cqyj' && item.label === '超期预警'"
          @addTgjlTab="addTgjlTab"
        ></cqyj>
        <tgjl
          ref="tgjlRef"
          v-if="activeName === 'tgjl' && item.label === '退改记录'"
          :paramsData="tgjlTabRowData"
        ></tgjl>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
